<template>
  <section>
  	<div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
				<span>考试名称:</span>
        <select class="select" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option></option>
        </select>
        <span>年级:</span>
        <select class="select" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option></option>
        </select>
        <span>班级:</span>
        <select class="select" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option></option>
        </select>
        <span>考试科目:</span>
        <select class="endselect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option></option>
        </select>
        <el-button type="primary" size="small">搜索</el-button>
      </div>
  	</div>

  	<div class="model score">
      <img :src="IMGBASE64.CHENGJIDENGFEN2X" class="pink">
  		<span class="title">成绩登分</span>
  		<div class="body">
				<ul>
          <li v-for="item in array">
            <span>{{item.name}}</span>
            <input type="text" v-model="item.number">
          </li>
          <div class="clear"></div>
        </ul>
  		</div>
      <div class="bottom">
        <button class="btn btn-danger">保存</button>
      </div>
  	</div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      array: [{
        name: '欧阳俊逸1',
        number: null
      },
      {
        name: '欧阳俊逸2',
        number: null
      },
      {
        name: '欧阳俊逸3',
        number: null
      },
      {
        name: '欧阳俊逸4',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      },
      {
        name: '欧阳俊逸',
        number: null
      }]
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
@import '/static/css/material-dashboard.css';
.retrieval{
	.body{
		span{
    	margin-left: 4%;
    }
    span:first-child{
    	margin-left: 0;
    }
    .select{
      width: 10%;
      border: 0;
      border-bottom: 1px solid #D7D7D7;
    }
    .endselect{
      width: 10%;
      border: 0;
      border-bottom: 1px solid #D7D7D7;
      margin-right: 3%;
    }
	}
}
.clear{
	clear: both;
}
.score{
  .body{
    padding: 40px 20px 10px 120px;
  }
	min-height: 200px;
  li{
    width: 25%;
    float: left;
    padding: 15px 0px 15px 0;
    text-align: right;
    input{
      width: 40%;
      margin-left: 10%;
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      padding-top: 4px;
      padding-bottom: 4px;
    }
  }
  .bottom{
    padding: 20px 20px 10px 120px;
    text-align: center;
  }
}
</style>
